<template>
  <div class="app">
    <van-tabbar v-model="active" v-if="!HideList" route>
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="cart-o" to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/mine" v-if="token"
        >我的</van-tabbar-item
      >
      <van-tabbar-item icon="manager-o" to="/login" v-else
        >登录</van-tabbar-item
      >
    </van-tabbar>
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from "./stores/counter";
import { storeToRefs } from "pinia";
import { ref, computed } from "vue";
import { useRoute } from "vue-router";
const counterStore = useCounterStore();
const { token } = storeToRefs(counterStore);
const route = useRoute();
let active = ref<number>(0);
let hideList = ref([
  "/cart",
  "/mine",
  "/detail",
  "/login",
  "/address",
  "/order",
  "/search",
  "/register",
  "/messagecode",
  "/password",
]);
let HideList = computed(() => hideList.value.includes(route.path));
</script>

<style>
.app {
  width: 100vw;
  height: 100vh;
  background-color: rgb(246, 246, 246);
}
</style>
